<template>
  <div>
    <!--添加根节点-->
    <el-dialog title="添加根节点" :visible.sync="rootVisible">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="rootItemName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rootSave()">保存</el-button>
          <el-button @click="rootVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--编辑节点-->
    <el-dialog title="编辑节点" :visible.sync="editVisible">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="editItemName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editSave()">保存</el-button>
          <el-button @click="editVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--添加子节点-->
    <el-dialog title="添加子节点" :visible.sync="childVisible">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="childItemName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="childSave()">保存</el-button>
          <el-button @click="childVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--大纲管理内容-->
    <el-card v-loading="loading" shadow="never">
      <div slot="header">选项管理
        <el-button type="primary" size="mini" @click="addRoot()">添加根选项</el-button>
      </div>
      <el-tree :data="items" :props="{label:'item_name'}">
        <div class="yangshi" @mousemove="showOpt=data.id" @mouseout="showOpt=''" slot-scope="{data,node}">
          <div>{{data.item_name}}</div>
          <div v-show="showOpt==data.id">
          <el-button type="primary" size="mini" @click.stop="edit(data)">编辑</el-button>
          <el-button type="primary" size="mini" @click.stop="addChild(data.id)">添加子选项</el-button>
          <el-button type="danger" size="mini" @click.stop="del(data.id)">删除</el-button>
          <el-button
            v-show="node.previousSibling"
            type="primary"
            @click="sortNode(data.id,'up')"
            icon="el-icon-arrow-up"
            size="mini"
            circle
          ></el-button>
          <el-button
            v-show="node.nextSibling"
            type="primary"
            @click="sortNode(data.id,'down')"
            icon="el-icon-arrow-down"
            size="mini"
            circle
          ></el-button>
          </div>
        </div>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOpt:'',
      loading: false,
      rootItemName: "",
      rootVisible: false,
      childVisible: false,
      editVisible: false,
      parentId: "",
      editId: "",
      childItemName: "",
      editItemName: "",
      items: []
    };
  },
  created() {
    this.getItems();
  },
  methods: {
    sortNode(id, dir) {
      this.axios.put(`/items/sort/${id}/${dir}`, {}).then(ret => {
        this.getItems();
      });
    },
    edit(data) {
      this.editId = data.id;
      this.editItemName = data.item_name;
      this.editVisible = true;
    },
    addChild(id) {
      this.parentId = id;
      this.childVisible = true;
    },
    del(id) {
      this.$confirm("删除", "提示", "删除")
        .then(() => {
          this.axios
            .delete(`/items/del/${id}`)
            .then(() => {
              this.getItems();
            })
            .catch(error => {
              this.$message.error("请先删除子菜单");
            });
        })
        .catch(() => {});
    },
    addRoot() {
      this.rootVisible = true;
    },
    editSave() {
      this.axios
        .put(`/items/edit/${this.editId}`, {
          item_name: this.editItemName
        })
        .then(ret => {
          this.getItems();
          this.editVisible = false;
        });
    },
    rootSave() {
      this.axios
        .post("/items/add", {
          item_name: this.rootItemName,
          parent_id: 0,
          status: 1
        })
        .then(ret => {
          this.getItems();
          this.rootVisible = false;
        });
    },
    childSave() {
      this.axios
        .post("/items/add", {
          item_name: this.childItemName,
          parent_id: this.parentId,
          status: 1
        })
        .then(ret => {
          this.getItems();
          this.childVisible = false;
        });
    },
    getItems() {
      this.loading = true;
      this.axios.get("/items").then(ret => {
        const { data } = ret.data;
        this.loading = false;
        this.items = data;
      });
    }
  }
};
</script>

<style>
.el-tree-node__content {
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 5px 0px;
  padding:10px 0;
}
.yangshi{
  display:flex;
  width:100%;
  height:25px;
  justify-content:space-between;
}
</style>
